<template>
  <div class="carousel">
    <div v-if="pics.length" class="image-wrap">
      <div v-for="(item, index) of pics" :key="index" class="image-content" @mouseenter="handleEnter(index)" @mouseleave="handleLeave(index)">
        <img :src="item" preview="detail" preview-text="轮播图片" alt="" class="image">
        <div v-if="index !== moveIndex" class="icon-wrap">
          <i class="el-icon-upload-success el-icon-check" />
        </div>
        <div v-else class="icon-wrap icon-wrap-close" @click="handleDeletePic(index)">
          <i class="el-icon-close" />
        </div>
      </div>
    </div>
    <div class="el-upload" @click="handleCarousel">
      <i class="el-icon-plus avatar-uploader-icon" />
    </div>
    <el-dialog :visible.sync="dialogCarousel" :lock-scroll="true" :append-to-body="true">
      <el-upload :action="`/merchant/common/upload`" :on-success="handleSuccess" :on-remove="handleRemove" list-type="picture" drag multiple class="upload-demo">
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>
    <div class="desc-box">图片大小（{{ ratio }}）</div>
  </div>
</template>
<script>
export default {
  name: 'Carousel',
  props: {
    carousel: {
      type: Array,
      default() {
        return []
      }
    },
    ratio: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      moveIndex: null,
      dialogCarousel: false,
      pics: [], // 显示
      carousels: [] // 数据
    }
  },
  watch: {
    carousels(carousel) {
      this.$emit('carousel', carousel)
    },
    carousel(carousel) {
      this.pics = carousel
      this.carousels = carousel
    }
  },
  created() {
    this.pics = this.carousel
    this.carousels = this.carousel
  },
  methods: {
    handleCarousel() {
      this.dialogCarousel = true
    },
    handleDeletePic(index) {
      this.pics.splice(index, 1)
      this.carousels.splice(index, 1)
    },
    handleEnter(index) {
      this.moveIndex = index
    },
    handleLeave(index) {
      this.moveIndex = null
    },
    // 轮播上传成功
    handleSuccess(res, file, fileList) {
      const result = this.carousels
      const { pics } = this
      const { path } = res.data
      fileList.map((item) => {
        this.carousels = result.concat(path)
        this.pics = pics.concat(file.url)
        this.$previewRefresh()
      })
    },
    handleRemove(file, fileList) {
      const { path } = file.response.data
      const { pics } = this
      pics.map((item, index) => {
        item === file.url ? this.pics.splice(index, 1) : ''
      })
      this.carousels.map((item, index) => {
        item === path ? this.carousels.splice(index, 1) : ''
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.carousel{
  display: flex;
  position: relative;
  height: 200px;
  .el-upload {
    border: 1px dashed #d9d9d9;
    width: 178px;
    height: 178px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .el-upload:hover {
    border-color: #409EFF;
  }
  .image-wrap {
    display: flex;
    .image-content {
      position: relative;
      margin-right: 20px;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      .icon-wrap{
        position: absolute;
        right: -17px;
        top: -7px;
        width: 36px;
        height: 24px;
        background: #13ce66;
        text-align: center;
        transform: rotate(45deg);
        box-shadow: 0 1px 1px #ccc;
        color: #fff;
        i{
          font-size: 12px;
          margin-top: 12px;
          transform: rotate(-45deg);
        }
      }
      .icon-wrap-close {
        background: transparent;
        color: #8c939d;
        box-shadow: none;
        cursor: pointer;
      }
      .image{
        width: 178px;
        height: 178px;
        margin-bottom: 20px;
        display: block;
        border-radius: 6px;
      }
    }
  }
  .desc-box{
    position: absolute;
    bottom: -10px;
    left: 0;
    font-size: 12px;
    color: #99a9bf;
    line-height: 30px;
  }
}
</style>

